<template>
  <div class="userTable">
    <el-table
      :data="data"
      style="width: 100%"
      stripe
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="table_config.checkbox && isMounted"
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <div v-for="item in table_config.thead" :key="item.index">
        <!-- 回调 -->
        <el-table-column
          v-if="item.type === 'slot'"
          :prop="item.prop"
          :label="item.label"
          align="center"
          :width="item.width"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope.row"></slot
          ></template>
        </el-table-column>
        <!-- 纯文本渲染 -->
        <el-table-column
          v-else
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
        </el-table-column>
      </div>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    name: "userTable",
    props: {
      data: {
        type: Array,
        default: () => ({}),
      },

      columns: {
        type: Object,
        default: () => ({}),
      },

      total: {
        type: Number,
        default: () => ({}),
      },

      pageSize: {
        type: Number,
        default: () => ({}),
      },

      currentPage: {
        type: Number,
        default: () => ({}),
      },

      pageSizes: {
        type: Array,
        default: () => ({}),
      },
    },
    data() {
      return {
        // 数据初始化
        table_config: {
          thead: [],
          checkbox: true,
        },
        isMounted: false,
      }
    },
    mounted() {
      this.isMounted = true
    },
    methods: {
      handleSizeChange(pageSize) {
        this.$emit("changePage", pageSize, this.currentPage)
      },

      handleCurrentChange(currentPage) {
        this.$emit("changePage", this.pageSize, currentPage)
      },
      handleSelectionChange(val) {
        this.$emit("handleSelect", val)
      },
      // 初始化数据
      initConfig() {
        // 替换数据,循环,如果table_config键值有config的值,替换值
        for (let key in this.columns) {
          if (Object.keys(this.table_config).includes(key)) {
            this.table_config[key] = this.columns[key]
          }
        }
      },
    },
    watch: {
      // 传过来的数据监听
      columns: {
        handler(newValue) {
          this.initConfig()
        },
        immediate: true,
      },
    },
  }
</script>
<style lang="scss">
  .pagination {
    width: 100%;
    padding-top: 20px;
    text-align: center;
  }
</style>
